<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="FP_chart" style="height: 88.5714%;width: 100.0%;">
			<canvas id="canvas_layer" width="50000" height="900" style="border: 1px solid #eeeeee;"></canvas>
			<div>
				<div id="indicator" style="position: absolute; z-index: 51; border-style: dashed; border-color: rgb(73, 73, 73);left : 10px; top: 20px; border-width: 0px 1px 0px 0px; height: 665px;" />
			</div>
			<div>
				<div id="float_window" style="position: absolute; z-index: 52; padding: 2px; width: 260px; line-height: 16px; font-size: 12px; left: 60px; top: 30px; background-color: rgba(255, 255, 255, 0.9); color: rgb(0, 0, 0); border: 1px solid rgb(0, 0, 0);">
					<table style="border: 0px; font: inherit; vertical-align: baseline; margin: 0px; padding: 0px; border-collapse: collapse; border-spacing: 0px; text-align: center; width: 100%;">
						<thead>
						</thead>
						<tbody id='tbodys'>
							<tr>
								<th colspan="2" style="font-weight: normal; border: 0px; height: 16px; text-align: center;">
									<span>市场温度</span>
								</th>
							</tr>
							<tr style="text-align: center;">
								<th colspan="2" style="font-weight: normal; border: 0px; height: 16px; text-align: center;">
									<span id="date">2019/08/21/三</span>
								</th>
							</tr>
							<tr>
								<th style="text-align: left; font-weight: normal; border: 0px; height: 16px;">
									<span>标签涨幅强度</span>
								</th>
								<td style="text-align: right; border: 0px; height: 16px;">
									<span id="ceng_ratio">4.78%</span>
								</td>
							</tr>
							<tr>
								<th style="text-align: left; font-weight: normal; border: 0px; height: 16px;">
									<span>代码：000921 名称：平安科技CC 涨幅：</span>
								</th>
								<td style="text-align: right; border: 0px; height: 16px;">
									<span id="ting_ratio">90%</span>
								</td>
							</tr>
							<tr>
								<th style="text-align: left; font-weight: normal; border: 0px; height: 16px;">
									<span>高标</span>
								</th>
								<td style="text-align: right; border: 0px; height: 16px;">
									<span id="gaobiao">0个</span>
								</td>
							</tr>
							<tr>
								<th style="text-align: left; font-weight: normal; border: 0px; height: 16px;">
									<span>盘中超跌家数</span>
								</th>
								<td style="text-align: right; border: 0px; height: 16px;">
									<span id="chaodie">0家</span>
								</td>
							</tr>
							<tr>
								<th style="text-align: left; font-weight: normal; border: 0px; height: 16px;">
									<span>今日跌停家数</span>
								</th>
								<td style="text-align: right; border: 0px; height: 16px;">
									<span id="dieting">0家</span>
								</td>
							</tr>
							<tr>
								<th style="text-align: left; font-weight: normal; border: 0px; height: 16px;">
									<span>今日曾涨停家数</span>
								</th>
								<td style="text-align: right; border: 0px; height: 16px;">
									<span id="cengting">0家</span>
								</td>
							</tr>
							<tr>
								<th style="text-align: left; font-weight: normal; border: 0px; height: 16px;">
									<span>今日涨停家数</span>
								</th>
								<td style="text-align: right; border: 0px; height: 16px;">
									<span id="zhangting">0家</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="application/json" src="cengzhang_earning.json"></script>
<script>
	var LChart = function() {
		this.con = document.querySelector("canvas").getContext("2d");
		this.canW = this.con.canvas.width;
		this.canH = this.con.canvas.height;
		this.size = 10;
		this.space = 20;
		this.step = 30;
		this.x0 = this.space;
		this.dateheight = 100
		this.y0 = this.canH - this.space - this.dateheight;
		this.pointSize = 4;
		this.date = document.getElementById('date');
		this.indicator = document.getElementById('indicator');
		this.float_window = document.getElementById('float_window');
		this.tbodys = document.getElementById("tbodys")
		this.gaobiao_scale = 40;
		this.color_index = 0;

	};

	LChart.prototype.check_load_data = function() {
		lc.init();
		lc.monitorMouse();
	};

	LChart.prototype.transform_function_1 = function(data, object) {
		var transform = data * 10 + 100 - 2 * object.gaobiao_scale;
		return transform;
	}

	LChart.prototype.transform_function_2 = function(data) {
		var transform = data / 12;
		return transform;
	}

	LChart.prototype.transform_function_3 = function(data) {
		var transform = data / 2;
		return transform;
	}

	LChart.prototype.init = function() {
		// 计算范围
		x_date_length = 0
		for (var date_ind = 0; date_ind < data.length; date_ind++) {

			var tags_len = data[date_ind]['tags_inc'].length
			x_date_length += Math.max(tags_len, 1)
		}
		this.huaGeZi();
		this.rectMatrix(data, this.gaobiao_scale);
		this.drawdate(data);
	};
	LChart.prototype.huaGeZi = function() {
		var lineX = Math.floor(this.canH / this.size);
		for (var i = 1; i < lineX; i++) {
			this.con.beginPath();
			this.con.strokeStyle = "#eee";
			this.con.moveTo(0, i * this.size + 0.5);
			this.con.lineTo(this.canW, i * this.size + 0.5);
			this.con.stroke();
		}
		var lineY = Math.floor(this.canW / this.size);
		for (var j = 1; j < lineY; j++) {
			this.con.beginPath();
			this.con.strokeStyle = "#eee";
			this.con.moveTo(j * this.size + 0.5, 0);
			this.con.lineTo(j * this.size + 0.5, this.canH);
			this.con.stroke();
		}
	};

	LChart.prototype.drawline = function(startX, startY, endX, endY, color) {
		this.con.beginPath();
		//X
		this.con.moveTo(startX, startY);
		this.con.lineTo(endX, endY);
		this.con.strokeStyle = color;
		this.con.stroke();
	};

	LChart.prototype.zb = function() {
		this.con.beginPath();
		//X
		this.con.moveTo(this.x0, this.y0);
		this.con.lineTo(this.canW - this.space, this.y0);
		this.con.lineTo(this.canW - this.space - this.size, this.y0 + this.size / 2);
		this.con.lineTo(this.canW - this.space - this.size, this.y0 - this.size / 2);
		this.con.lineTo(this.canW - this.space, this.y0);
		this.con.fill();
		this.con.strokeStyle = "gray";
		this.con.stroke();
		//Y
		this.con.moveTo(this.x0, this.y0);
		this.con.lineTo(this.x0, this.space);
		this.con.lineTo(this.x0 + this.size / 2, this.space + this.size);
		this.con.lineTo(this.x0 - this.size / 2, this.space + this.size);
		this.con.lineTo(this.x0, this.space);
		this.con.fill();
		this.con.strokeStyle = "gray";
		this.con.stroke();
	};

	LChart.prototype.point = function(data, transform_function, color) {
		this.con.beginPath();
		var that = this;
		var prevX = 0;
		var prevY = 0;
		that.con.strokeStyle = color;
		for (var i = 0; i < data.length; i++) { //绘制柱形
			var canvasX = that.x0 + (i + 1) * this.step;
			var canvasY = that.y0 - transform_function(data[i], this) - 40;
			that.con.fillRect(canvasX - that.pointSize / 2, canvasY - that.pointSize / 2, that.pointSize, that.pointSize);
			if (i == 0) {
				that.con.moveTo(canvasX, canvasY);
			} else {
				that.con.moveTo(prevX, prevY);
				that.con.lineTo(canvasX, canvasY);
				that.con.stroke();
			}
			prevX = canvasX;
			prevY = canvasY;
		}
	};

	LChart.prototype.fillpoint = function(data, color, startX, startY, transform_function, reverse) {
		var that = this;
		var prevX = startX;
		var prevY = startY;
		that.con.beginPath();
		that.con.strokeStyle = color;
		that.con.fillStyle = color;
		var startx = 0;
		var starty = 0;
		for (var i = 0; i < data.length; i++) { //绘制柱形
			var canvasX = startX + (i + 1) * this.step;
			var offsetY = data[i];
			if (transform_function != null) {
				offsetY = transform_function(data[i]);
			}
			var canvasY = reverse ? startY - offsetY : startY + offsetY;
			if (i == 0) {
				startx = canvasX;
				starty = startY;
				that.con.moveTo(canvasX, canvasY);
			} else {
				that.con.lineTo(canvasX, canvasY);
			}
			prevX = canvasX;
			prevY = canvasY;
		}
		that.con.lineTo(prevX, startY);
		that.con.lineTo(startx, starty);
		//that.con.closePath();
		that.con.fill();
		this.con.restore();
	};


	LChart.prototype.drawRoundRect = function(x, y, width, height, radius,color) {
		this.con.fillStyle = color
		this.con.beginPath();
		this.con.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
		this.con.lineTo(width - radius + x, y);
		this.con.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
		this.con.lineTo(width + x, height + y - radius);
		this.con.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
		this.con.lineTo(radius + x, height + y);
		this.con.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
		this.con.closePath();
	}


	LChart.prototype.drawFont = function(options, vertical) {
		this.con.save();
		this.con.fillStyle = options.color;
		this.con.font = this.w * options.fontSizePercent + "px 宋体";
		this.con.textAlign = options.textAlign || "center";
		this.con.textBaseline = options.textBaseline || "bottom";
		if (vertical) {
			this.con.rotate(-45 * Math.PI / 180);
		}
		this.con.fillText(options.text, options.x, options.y);

		this.con.restore();
	}


	LChart.prototype.rectMatrix = function(data, amplify) {
		var hArrTop = 12; //直方图，柱形上方显示字体
		var pos = 100; //起始位置

		var lineWPercent = 0.25; //柱形宽度
		var rectRadiusPercent = 1 / 2; //柱形圆角大小



		color_index = 0
		var color_arr = ["DarkSeaGreen", "gray", "LightSteelBlue", "Sienna"]
		var strokeStyle = "gray"; //柱形颜色
		var topFontColor = "gray"; //柱形顶部文字颜色
		var topFontSizePercent = 1 / 25; //柱形顶部文字大小
		var isShadow = true;


		var lineW = 6; //柱形宽度
		var y = this.y0; //柱形底部位置

		if (isShadow) {
			this.con.save();
			this.con.shadowOffsetX = 5; //绘制阴影
			this.con.shadowOffsetY = 5;
			this.con.shadowBlur = 4;
			this.con.shadowColor = "rgba(0, 0, 0, 0.2)";
		}

		this.con.fillStyle = "rgba(0, 0, 0, 0.4)"; //填充柱形,颜色

		x_base = 0
		for (var dt = 0; dt < data.length; dt++) {
			var color = color_arr[color_index % color_arr.length]
			color_index++
			// 没有数据的时候也需要绘制一个空格的地方
			if (data[dt]['tags_inc'].length == 0) {
				x_base += 1
				var x = this.x0 + 30 * (x_base)
				this.drawRoundRect(x - lineW / 2, this.y0 - 0 * amplify, lineW, 0 * amplify, lineW * rectRadiusPercent,color);
				this.con.fill();
				if (true) {
					this.drawFont({
						x: x,
						y: y - 0 * amplify - 10,
						text: '没有数据~~',
						color: topFontColor,
						fontSizePercent: topFontSizePercent
					}, false);
				} //绘制文字
			} else {
				var tags_inc = data[dt]['tags_inc']
				for (var ti = 0; ti < tags_inc.length; ti++) {
					x_base += 1
					one_tag_incr = tags_inc[ti]

					var x = this.x0 + 30 * (x_base)
					this.drawRoundRect(x - lineW / 2, this.y0 - calu_4_draw(one_tag_incr['incr'] * amplify), lineW, calu_4_draw(one_tag_incr['incr'] * amplify),
						lineW *
						rectRadiusPercent,color);
					this.con.fill();
					if (true) {
						this.drawFont({
							x: x,
							y: y - calu_4_draw(one_tag_incr['incr'] * amplify ),
							text: one_tag_incr['tag'],
							color: topFontColor,
							fontSizePercent: topFontSizePercent
						}, false);
					} //绘制文字
				}
			}

		}

		this.con.restore();
	}

	// func
	LChart.prototype.drawdate = function(data) {
		// 需要根据tag_inc.length*date.length 来算 最少要画一个

		var date_length = data.length; //个数

		var lineW = 6; //柱形宽度
		var y = this.y0; //柱形底部位置
		this.con.fillStyle = "rgba(0, 0, 0, 0.8)"; //填充柱形,颜色

		x_shift_index = 0
		for (var i = 0; i < date_length; i++) { //绘制柱形

			tag_incr = data[i]['tags_inc']
			tag_incr_length = tag_incr.length

			// 先画一个出来，在画剩余的-1
			if (tag_incr_length == 0) {
				var x = this.y0 + this.step * 0.7071 * (x_shift_index + 2)
				this.drawFont({
					x: this.y0 + this.step * 0.7071 * x_shift_index - this.canH * 1.414 - 2 * this.step * this.canH / 200 + 215,
					y: x - 2 * this.step * this.canH / 200 + 45,
					text: data[i]['date'],
					color: "rgba(0, 0, 0, 0.8)",
					fontSizePercent: 1 / 25
				}, true);
				x_shift_index += 1
			} else {
				for (var tag_incr_inde = 0; tag_incr_inde < tag_incr_length; tag_incr_inde++) {
					var x = this.y0 + this.step * 0.7071 * (x_shift_index + 2)
					this.drawFont({
						x: this.y0 + this.step * 0.7071 * x_shift_index - this.canH * 1.414 - 2 * this.step * this.canH / 200 + 215,
						y: x - 2 * this.step * this.canH / 200 + 45,
						text: data[i]['date'],
						color: "rgba(0, 0, 0, 0.8)",
						fontSizePercent: 1 / 25
					}, true);
					x_shift_index += 1
				}
			}

		}
		this.con.restore();

	}


	function drawCodeRelationTag(data, index, that) {
		var res = fSIndex(index)
		var si = res['si']
		var fi = res['fi']
		ht = ''
		ht += '<tr><th colspan="2" style="font-weight: normal; border: 0px; height: 16px; text-align: center;"><span>' + data[
			fi]['date'] + '</span></th></tr>'
		ht += '<tr><th colspan="2" style="font-weight: normal; border: 0px; height: 16px; text-align: center;"><span> 标签:' +
			data[fi]['tags_inc'][si]['tag'] + ' 强度:' + data[fi]['tags_inc'][si]['incr'] + '</span></th></tr>'
		rela_codes = data[fi]['tags_inc'][si]['rela_codes']

		for (code_ind in rela_codes) {
			var rela_code = rela_codes[code_ind]
			tp = '<tr><th style="text-align: left; font-weight: normal; border: 0px; height: 16px;"><span> 代码: '+rela_code['code']+' 股票：' + rela_code[
					'name'] + ' 涨幅：' + rela_code['up'] +'%</span></th></tr>'
			ht += tp
			tp = '<tr><th style="text-align: left; font-weight: normal; border: 0px; height: 16px;"><span> 关联度：'+rela_code['weight'] +' 贡献度：'+rela_code[
					'contribution'] +'</span></th></tr>'
			ht += tp
		}

		that.tbodys.innerHTML = ht
	}
	
	function calu_4_draw(height){
		return Math.log2(height+0.1)*200
	}
	function fSIndex(index) {
		var s = 0
		var e = 0
		var fi = 0
		var si = 0
		data_index = 0
		for (var ind in data) {
			s = e
			e = e + Math.max(data[ind]['tags_inc'].length, 1)
			if (index >= s && index < e) {
				si = index - s 
				break;
			}
			data_index++
		}
		fi = data_index
		return {
			"fi": fi,
			"si": si
		}
	}
	LChart.prototype.updateFloatText = function(ev) {
		var index = 0;
		if (ev.layerX <= this.x0 + 30 + 30 / 2) {
			index = 0;
		} else if (ev.layerX > this.x0 + (x_date_length - 1) * 30 + 30 / 2) {
			index = parseInt(x_date_length - 1);
		} else {
			index = parseInt((ev.layerX - 30 - 30 / 2) / 30);
		}

		this.indicator.style = "position: absolute; z-index: 51; border-style: dashed; border-color: rgb(73, 73, 73);left: " +
			(((index + 1) * 30 + 9 + this.x0) + "") +
			"px; top: 20px; border-width: 0px 1px 0px 0px; height: " + ((this.canH - 135) + "") + "px;";

		// 需要转为data对应的index 前面的累加和s 后面的累加和e 对于数据 1 2 3 有 s0 0 e0 1  s2 1 e2 3
		var s = 0
		var e = 0

		data_index = 0
		for (var ind in data) {
			s = e
			e = e + Math.max(data[ind]['tags_inc'].length, 1)
			if (index >= s && index <= e) {
				break;
			}
			data_index++
		}

		// this.date.innerHTML = data[data_index]['date'];

		drawCodeRelationTag(data, index, this)

		if (this.float_window.offsetLeft != (60 + ev.layerX - ev.clientX)) {
			this.float_window.style =
				"position: absolute; z-index: 52; padding: 2px; width: 260px; line-height: 16px;\
             font-size: 12px; left: " +
				((60 + ev.layerX - ev.clientX) + "") +
				"px; top: 30px; background-color: rgba(255, 255, 255, 0.9); color: rgb(0, 0, 0);\
              border: 1px solid rgb(0, 0, 0);"
		}

		if (ev.layerX < (ev.layerX - ev.clientX + 280) && this.float_window.offsetLeft == (60 + ev.layerX - ev.clientX)) {
			this.float_window.style =
				"position: absolute; z-index: 52; padding: 2px; width: 260px; line-height: 16px;\
             font-size: 12px; left: " +
				((310 + ev.layerX - ev.clientX) + "") +
				"px; top: 30px; background-color: rgba(255, 255, 255, 0.9); color: rgb(0, 0, 0);\
              border: 1px solid rgb(0, 0, 0);"
		} else if (ev.layerX > (ev.layerX - ev.clientX + 280) && this.float_window.offsetLeft == (310 + ev.layerX - ev.clientX)) {
			this.float_window.style =
				"position: absolute; z-index: 52; padding: 2px; width: 260px; line-height: 16px;\
             font-size: 12px; left: " +
				((60 + ev.layerX - ev.clientX) + "") +
				"px; top: 30px; background-color: rgba(255, 255, 255, 0.9); color: rgb(0, 0, 0);\
              border: 1px solid rgb(0, 0, 0);"
		}
	}


	LChart.prototype.monitorMouse = function() {
		that = this;
		var d = document.getElementById('canvas_layer');
		d.addEventListener('mouseenter', function() {
			that.float_window.style.display = "";
			that.indicator.style.display = "";
		})
		d.addEventListener('mousemove', function(ev) {
			ev = ev || window.event;
			that.updateFloatText(ev);
		})
		d.addEventListener('mouseleave', function(ev) {
			if (ev.relatedTarget != that.indicator) {
				that.float_window.style.display = "none";
				that.indicator.style.display = "none";
			}
		})
		d.addEventListener('mouseover', function(ev) {
			//ev = ev || window.event;
			//that.updateFloatText(ev);
		})
		d.addEventListener('mouseout', function(ev) {
			if (ev.relatedTarget != that.indicator) {
				that.float_window.style.display = "none";
				that.indicator.style.display = "none";
			}
		})
	}

	var lc = new LChart();

	var market_thermometer = new XMLHttpRequest();
	market_thermometer.overrideMimeType("application/json");
	market_thermometer.open("GET", "/static/MarketThermometer.json", true);
	market_thermometer.send(null);
	market_thermometer.onreadystatechange = function() {
		if (market_thermometer.readyState == 4 && market_thermometer.status == 200) {
			all_data = JSON.parse(market_thermometer.responseText);
			// cengzhang_earning_data = data['cengzhang_earning'];
			// zhangting_earning_data = data['zhangting_earning'];
			data = all_data['data'];
			// date_list_a = data['date'];
			// cengzhang_list = data['cengzhang'];
			// zhangting_list = data['zhangting'];
			// diechao_5 = data['diechao_5'];
			// dieting_list = data['dieting'];
			// 计算出x轴上一个会出现多少个日期，及时今天没有爆发的标签，也需要进行操作
			
			lc.gaobiao_scale = all_data['gaobiao_scale']
			lc.check_load_data();
		}
	}
</script>
